<template>
  <div class="header-info">
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">高度设置</el-divider>
      </div>

      <el-form-item label="区域高度">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo['areaHeight']"
        />
      </el-form-item>
    </div>
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">标题设置</el-divider>
      </div>
      <el-form-item label="内容">
        <el-input
            size="small"
            v-model="optionsInfo['title']['connect']"
        />
      </el-form-item>
      <el-form-item label="字号">
        <el-input-number
            :min="12"
            size="small"
            v-model="optionsInfo['title']['fontSize']"
        />
      </el-form-item>
      <el-form-item label="粗细设置">
        <el-select v-model="optionsInfo['title']['fontWeight']" placeholder="请选择">
          <el-option v-for="item in fontWeightOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="字体颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo['title']['color']"/>
      </el-form-item>

      <el-form-item label="背景色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo['title']['background']"/>
      </el-form-item>

    </div>
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">滚动项设置</el-divider>
      </div>
      <el-form-item label="滚动个数">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo['scrollNumber']"
        />
      </el-form-item>
      <el-form-item label="列表字号">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo['list']['fontSize']"
        />
      </el-form-item>

      <el-form-item label="患者号背景色显示" class="replenish-shown">
        <el-switch v-model="optionsInfo['list']['orderNoBackgroundShown']"/>
      </el-form-item>

      <el-form-item label="患者号背景色" class="replenish-shown">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo['list']['orderNoBackground']"/>
      </el-form-item>
      <el-form-item label="患者号字体颜色" class="replenish-shown">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo['list']['orderNoColor']"/>
      </el-form-item>
      <el-form-item label="患者信息粗细设置" class="replenish-shown">
        <el-select v-model="optionsInfo['list']['orderNoFontWeight']" placeholder="请选择">
          <el-option v-for="item in fontWeightOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item class="col-info">
        <div class="title">
          <el-divider content-position="center">显示列</el-divider>
        </div>
        <div class="options-info row-option">
          <el-checkbox-group v-model="optionsInfo['defaultShowCol']" :disabled="true">
<!--            <Draggable-->
<!--                class="list-group"-->
<!--                @end="handleDragEnd"-->
<!--                :list="optionsInfo['windowColOption']"-->
<!--                :animation="100"-->
<!--            >-->
              <el-checkbox
                  v-for="(item,index) in (optionsInfo['windowColOption'])"
                  :key="index"
                  :label="item.value"
                  :disabled="isDisabled(item.value)"

              >
                <div class="setting-info">
                  <el-input v-model="item.label" placeholder="请输入内容" size="small" :disabled="item.disabled"/>
                  <el-input v-model="item.value" placeholder="请输入字段" size="small" :disabled="item.fieldDisabled"/>
                  <el-input
                      type="number"
                      :min="0.1"
                      :max="7"
                      :step="0.1"
                      :precision="1"
                      v-model="item.flex"
                      size="small"
                      placeholder="请输入列宽"/>
                </div>
                <i class="el-icon-thumb" v-if="false"></i>
              </el-checkbox>
<!--            </Draggable>-->
          </el-checkbox-group>
        </div>
      </el-form-item>



      <el-form-item label="是否切屏" class="replenish-shown">
        <el-switch v-model="optionsInfo['switchState']"/>
      </el-form-item>

      <template v-if="optionsInfo['switchState']">
        <!--切屏等待时间-->
        <el-form-item label="切屏等待时间" class="replenish-shown">
          <el-input-number
              :min="6"
              size="small"
              v-model="optionsInfo['switchTime']"
          />
        </el-form-item>
      </template>

      <el-form-item label="显示条数" class="replenish-shown">
        <el-input-number
            :min="5"
            :max="20"
            size="small"
            v-model="optionsInfo['showRowNums']"
        />
      </el-form-item>

    </div>
  </div>
</template>

<script>
import Draggable from "vuedraggable"
import * as types from "@c/public/form-designer/devType/datas-types";

export default {
  name: "windowCallCurrentPatientConfig-editor",
  components: {Draggable},

  componentName: "windowCallCurrentPatientConfig-editor",

  mixins: [],

  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },

  inject: ['serverFieldList', 'getDesignerConfig'],

  data() {
    return {
      optionsInfo: Object(),
      //颜色选项
      predefineColors: types['predefineColors'],
      fontWeightOptions: types['fontWeightOptions'],
    }
  },

  computed: {
    isDisabled() {
      return function (val) {
        // let arr = ['deptName', 'treatmentRoomName', 'workerName'];
        let arr = [];
        return arr.includes(val);
      }
    },
  },

  methods: {



    // 拖动结束
    handleDragEnd() {

    },
  },

  watch: {
    // 组件的所有数据信息
    optionModel: {
      handler: function (val) {
        let key = (val.config)
        this.optionsInfo = val[key];
      },
      deep: true,
      immediate: true
    }
  }

}
</script>


<style lang="scss" scoped>
.replenish-shown {
  display: flex;
  flex-direction: column;

  :deep(label) {
    width: 100% !important;
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;
  }
}
.col-info {

  ::v-deep .el-form-item__content {
    margin-left: 1px !important;

    .title {
      width: 100%;
    }

    .el-checkbox__label {
      width: auto;
    }


    .el-icon-thumb {
      position: relative;
      top: 8px;
      padding-left: 10px;
      font-size: 18px;
      text-align: center;
    }

    .el-checkbox {
      width: calc(100% - 32px);
    }
  }

}
.row-option{
  :deep(.el-checkbox){
    display: flex;
    flex-direction: row;
    .el-checkbox__input{
      display: flex;
      align-self: flex-start;
      align-items: flex-start;
    }
    .el-checkbox__label{
      display: flex;
      flex-direction: row;
      .setting-info{
        display: flex;
        flex-direction: column;
        .el-input{
          width: 100%;
          margin-bottom: 20px;
          input[type="number"] {
            line-height: 1px !important;
          }
        }
        .el-input-number{
          width: 100%;
        }
        .el-input__inner{
          padding-right: 0 !important;
        }
      }
    }
  }


}
</style>